<template>
    <div class="right_box">
        <p class="subTitle ft_PingFangSC">住房保障</p>  
        <div class="year_content">
            <div class="years">
                <span @click="changeCurrentYear(index)" :class="activeYear==index?'active':''" v-for="(item,index) in years" :key="index">
                    {{ item }}
                </span>
            </div>
            <!-- <Rotation :w="45.87" :w_unit="'rem'" :h="'43.63rem'" :len="4" :current="activeYear" @changeCurrent="changeCurrentYear" > -->
                <Renovation v-for="(item,index) in years" :key="index" :year="item" />
            <!-- </Rotation>  -->
            <!-- <div class="content">
                <div class="content_top">
                    <div>
                        <p>计划改造项目数</p>
                        <p><span class="number">5000</span>个</p>
                    </div>
                    <div>
                        <p>实际完成项目数</p>
                        <p><span class="number">4000</span>个</p>
                    </div>
                    <div>
                        <p>完成百分比</p>
                        <p><span class="number">80.00</span>%</p>
                    </div>
                </div>
                <div class="content_bottom">
                    <div>
                        <div class="chart">
                            <div class="text">
                                <p class="number">5000</p>
                                <p>项目总数</p>
                            </div>
                            <PieChart :id="'pieChart1'"  :data="data1" />
                        </div>
                        <div class="text">
                            <p><span><span class="legend BFF"></span>新开工项目数</span><span class="number">1000</span><span>个</span></p>
                            <p><span><span class="legend B9"></span>在建项目数</span><span class="number">1600</span><span>个</span></p>
                            <p><span><span class="legend F8"></span>竣工项目数</span><span class="number">1000</span><span>个</span></p>
                            <p><span><span class="legend FF"></span>已交付项目数</span><span class="number">1400</span><span>个</span></p>
                        </div>
                    </div>
                    <div>
                        <div class="chart">
                            <div class="text">
                                <p class="number">9000</p>
                                <p>项目总面积</p>
                            </div>
                            <PieChart :id="'pieChart2'" :data="data2" />
                        </div>
                        <div class="text">
                            <p><span><span class="legend F64"></span>新开工面积</span><span class="number">2000</span><span>万m²</span></p>
                            <p><span><span class="legend B33A"></span>在建项面积</span><span class="number">2600</span><span>万m²</span></p>
                            <p><span><span class="legend D4F8"></span>竣工面积</span><span class="number">2000</span><span>万m²</span></p>
                            <p><span><span class="legend FF"></span>已交付面积</span><span class="number">2400</span><span>万m²</span></p>
                        </div>
                    </div>
                </div>
            </div> -->
        </div>
    </div>
</template>

<script>
// import Rotation from "@/components/common/Rotation";
import Renovation from "./renovation";
export default {
    name:'LeftBottom_right',
    components:{
        // Rotation,
        Renovation
    },
    methods:{
        changeCurrentYear(index){
            this.activeYear = index;
        },
    },
    data:()=>{
        return {
            years:[],
            activeYear:0            
        }
    },
    beforeMount(){
        var currentY = new Date().getFullYear();
        this.years=Array.from(Array(1)).map((item,index)=>(currentY-index));
    }
}
</script>

<style lang="scss" scoped>
.right_box{
    .year_content{
        width: 100%;
        padding: 1.2rem;
    }
}
</style>